<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ModBus</title>
	<script src="js/xhr.js"></script>
	<!--info 存放cgi返回的数据 通过arr找到要填充的标签 给相关属性进行赋值 在网页显示-->
	
	<style>
		/*兼容浏览器*/
		* {
			padding: 0;
			margin: 0;
		}

		.head-title {
			width: 100%;
			height: 120px;
			background-color: #415380;
			position: relative;
		}

		.head-title>img {
			position: absolute;
			top: 30px;
			left: 30px;
			width: 60px;
			height: 60px;
		}

		.head-title>h2 {
			position: absolute;
			left: 120px;
			top: 20px;
			color: #fff;
		}

		.middle-title>h2 {
			position: absolute;
			left: 320px;
			top: 150px;
			color:black;
		}

		.head-title>h1 {
			position: absolute;
			right: 50px;
			top: 20px;
			color: #fff;
		}

		.head-title>h4 {
			position: absolute;
			left: 120px;
			top: 60px;
			color: #fff;
		}

		.seg {
			width: 100%;
			height: 5px;
			background-color: #F96B00;
		}

		.bottom {
			width: 100%;
			height: 100px;
			background-color: #415380;
			position: relative;
		}

		.bottom>h3 {
			position: absolute;
			left: 700px;
			top: 30px;
			color: #ffffff;
		}

		.bottom>a {
			position: absolute;
			left: 950px;
			top: 30px;
			text-decoration: none;
			color: #fff;
		}

		.content {
			width: 100%;
			height: 605px;
		}

		.content-left {
			width: 15%;
			height: 605px;
			font-family: "Roboto", sans-serif;
			background-color: #BFBFBF;
			float: left;
			box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
		}

		.content-middle {
			width: 60%;
			background-color: white;
			text-align: center;
			text-transform: uppercase;
		}

		.content-right {
			width: 85%;
			height: 605px;
			background-color: #ffffff;
			float: right;
		}

		.left-title {
			height: 45px;
			width: 100%;
			background-color: #415380;
		}

		.left-title>a {
			display: block;
			width: 100%;
			height: 45px;
			text-align: center;
			line-height: 40px;
			color: #ffffff;
			text-decoration: none;
		}

		.content-left>.tabs {
			width: 100%;
			height: 100%;
			background-color: #415380;
			color: #fff;
			text-transform: uppercase;
			text-align: center;
		}

		.content-left>.tabs>.tab {
			width: 100%;
			height: 60px;
			border: 1px solid #415380;
			background-color: #F96B00;
			cursor: pointer;
			font-weight: bold;
			line-height: 60px;
		}

		.content-left>.tabs>.tab:hover {
			color: #415380;
		}
	</style>
</head>

<body onload="init()">
	<div class="head-title">
		<h2>华清远见教育集团</h2>
		<h1>秉承做良心教育</h1>
		<h4>济南研发中心</h4>
	</div>
	<div class="seg"></div>
	<div class="content">

		<div class="content-left">
			<div class="left-title">
				<a href="temp_index.html">系统信息</a>
			</div>
			<div class="tabs">
				<div class="tab"><a href="temp_STM32.html">STM32设备</a><br></div>
				<div class="tab"><a href="temp_modbus.html">ModBus设备</a><br></div>
				<div class="tab"><a href="http://192.168.1.110:8080/stream_simple.html">监控画面</a><br></div>
			</div>
		</div>

		<div>
			<div class="content active">
				<form action="">

					<!--<br>是换行标签-->
					<div class="middle-title">
					<h2> STM32   设 备 状 态     <h2>
							<!--value 是文本框默认值 checked 是按键默认选项-->
					</div>
					<div class="content-middle">
						<br><br><br><br><br><br>
							<h4>火焰传感器值</h4>
							<br>
							<input type="text" value="0.0" name="fire" id="fire" style="border:none;text-align: center" readonly>
							<br><br>
							<h4>电量值</h4>
							<br>
							<input type="text" value="0.0" name="bat" id="bat" style="border:none;text-align: center" readonly>
							<br><br>
							<h4>LED灯</h4>
							<br>
							<label for="1">ON</label>
							<input type="radio" name="led" id="all" onclick="control(303,'1')">
							<label for="0">OFF</label>
							<input type="radio" name="led" id="add"  checked="checked" onclick="control(303,'0')">
							<br>
							<br>
							<input type="button" value="刷新" id="2" onclick="refresh()">
							<!--强制刷新按钮-->
							<br>
						</div>
				</form>
			</div>

		</div>
	</div>
	<div class="seg"></div>
	<div class="bottom">
		<h3>北京华清远见教育集团</h3>
		<a href="http://m.hqyj.com">http://m.hqyj.com </a>
	</div>
</body>
<script>
	function control(key, curvalue) {
		var req = {
			"type": 1,
			"key": key,
			"val": curvalue,
		};
		XHR.post('cgi-bin/web.cgi', JSON.stringify(req), function (x, info) { });
	}
	function init() {
		refresh();
	}
	function refresh() {
		//这里是请求协议，需要根据双方约定来
		var post_req = {
			"type": 4,
			"limit": "all",
		};
		XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
			function (x, info) {
				console.log(info);
				if (info.result != 0) {
					alert("get data err");
				}
				for (var i = 0; i < info.data.length; i++) {
					console.log('data = ', info.data[i].val)
					if (info.data[i].key == 301) {
						document.getElementById('fire').value = info.data[i].val;
					}
					else if (info.data[i].key == 302) {
						document.getElementById('bat').value = info.data[i].val;
					}
					else if (info.data[i].key == 303) {
						// document.getElementById('1').value = info.data[i].val;
						let val = info.data[i].val;
						fun(val)
					}
				}
			}
		);
	}
	function fun(checkeds){
		if (checkeds == 0) {
			add.checked = true
		} else {
			all.checked =  true
		}
	}
</script>
<!--接收到的info是json字符串 需要解析-->

</html>